// 参考：https://juejin.cn/post/6855129006036123656#heading-12
<template>
  <div class="demo">
    <h3><slot name="moduleName">{{ moduleName }}</slot></h3>
    <p><slot name="moduleDesc">{{ moduleDesc }}</slot></p>
    <div class="component-wrapper">
      <div class="component-wrapper-demo">
        <slot name="moduleComponent">{{ moduleComponent }}</slot>
      </div>
       <module-code :code-desc="codeDesc" :code-str="codeStr"></module-code>
    </div>
  </div>
</template>

<script>

  import ModuleCode from './ModuleCode'
  
  export default {
    alias: 'Module',
    name: 'Module',
    props: {
      codeDesc: {
        type: String,
        default: '',
      },
      codeStr: {
        type: String,
        default: ''
      },
      moduleName: {
        type: String,
        default: ''
      },
      moduleDesc: {
        type: String,
        default: ''
      },
      moduleComponent: {
        type: Object,
        default: () => ({})
      }
    },
    components: {
      ModuleCode,
    }
  }
</script>

<style lang="scss" scoped>
.component-wrapper {
  // display: inline-block;
}
</style>

